<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:body>
        <div id="menu">
            <div class="container">
                <ul>
                    <li class="menu-allround">
                        <a href="#{utilBean.contextPath}">#{msg['home']}</a>
                    </li>
                    <li class="menu-allround">
                        <a href="#{utilBean.contextPath}/page/all-posts.jsf">#{msg['allTutorials']}</a>
                    </li>
                    <ui:repeat value="#{categoryBean.categoryTypes}" var="type">
                        <li class="menu-topround">
                            <a href="#">#{type.categoryTypeName}</a>
                            <h:panelGroup rendered="#{type.categoryTypeName ne 'Others'}">
                                <div id="java-menu" class="dropdown">
                                    <div class="tut-title">#{type.categoryTypeName} #{msg['Tutorials']}</div>
                                    <div class="dropdown-item">
                                        <img class="img-border img-holder" 
                                             src="#{utilBean.contextPath}/resources/#{type.imagePath}" alt=" " />
                                        <ul>
                                            <ui:repeat value="#{type.categories}" var="category">
                                                <li><a href="#{utilBean.contextPath}/page/posts.jsf?id=#{category.categoryId}">
                                                        #{category.categoryName}</a></li>
                                            </ui:repeat>
                                        </ul> 
                                    </div>
                                </div>
                            </h:panelGroup>
                            <h:panelGroup rendered="#{type.categoryTypeName eq 'Others'}">
                                <div id="misc-menu" class="dropdown">
                                    <div class="dropdown-item">
                                        <ul>  
                                            <ui:repeat value="#{type.categories}" var="others">
                                                <li class="list-misc"><a href="#{utilBean.contextPath}/page/posts.jsf?id=#{others.categoryId}">
                                                        #{others.categoryName}</a></li>
                                            </ui:repeat>
                                        </ul> 
                                    </div>
                                </div>
                            </h:panelGroup>
                        </li>
                    </ui:repeat>
                </ul>
            </div>
        </div>
    </h:body>
</html>
